<head th:fragment="headerCss">
    <meta charset="utf-8">
    <title>证书查询</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta name="keywords" content=""/>
    <meta name="description"
          content="证书查询"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="/js/layui/css/layui.css">
    <!-- Bootstrap CSS File -->
    <!--<link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">-->
    <link rel="stylesheet" href="/css/certificateQuery/common.css">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="/css/swiper-bundle.min.css" />
    <style>
        .detail-box{
            padding: 12px 30px 16px 30px;
        }
        .detail{
            background: #FFFFFF;
            text-align: center;
            font-size: 15px;
        }
        .items{
            display: flex;
            display: -moz-flex;
            display: -webkit-flex;
            align-items: baseline;
            -webkit-align-items: baseline;
            -moz-align-item:baseline;
            border-bottom: 1px solid #F2F2F2;
            padding: 14px 0;
        }
        .detail img{
            margin-bottom: 24px;
        }
        .content{
            text-align: left;
            margin-left: 12px;
            flex: 1;
            -webkit-flex: 1;
            -moz-box-flex: 1;
        }
        .tit-name{
            font-size: 17px;
            font-weight: bold;
            color: #333333;
            text-align: left;
            position: relative;
        }
        .tit-name .line{
            width: 4px;
            height: 12px;
            background: linear-gradient(180deg, #FF751A 0%, #FF751A 100%);
            border-radius: 2px 2px 2px 2px;
            position: absolute;
            left: -16px;
            top: 50%;
            margin-top: -6px;
        }
        .form-box{
            padding: 16px 15px;
            background: #fff;
            border-bottom: 8px solid #F3F3F3;
        }
        .form-box .item{
            display: flex;
            display: -moz-flex;
            display: -webkit-flex;
            align-items: center;
            -webkit-align-items: center;
            -moz-align-item:center;
            margin-bottom: 16px;
        }
        .form-box .item input{
            flex: 1;
            margin-left: 16px;
            height: 40px;
            border-radius: 4px;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
        }
        .layui-input,.layui-input:hover{
            /*border-color: #FF751A !important;*/
            color: #333;
        }
        .form-box .ti1{
            color: #0A132B;
            font-size: 14px;
        }
        .form-box .ti1 span{
            color: #FF751A;
        }
        .btn-box{
            width: 140px;
            height: 40px;
            line-height: 40px;
            background: #0AD15D;
            font-size: 16px;
            border-radius: 4px;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            margin-top: 16px;
            color: #fff;
            text-align: center;
            margin: 0 auto;
        }
        .no-image{
            margin-top: 40px;
        }
        .no-text{
            color: #ABB1BE;
            font-size: 13px;
        }
        .header-top{
            padding: 10px 16px;
            background: #fff;
            border-bottom: 8px solid #F3F3F3;
        }
       .header-top img{
            width: 120px;
            display: inline-block;
        }
       .mySwiper{
           height: 150px;
       }
       .swiper-wrapper .swiper-slide img{
           width: 100%;
           height: 150px;
       }
      .mySwiper .swiper-pagination-bullet-active{
            background: #04BE02;
       }
        .no-cert{
            display: none;
        }
        .list-box{
            display: none;
        }
    </style>
</head>
<body class="signin">
<div class="certificate-box">
    <div class="header-top">
        <img src="/img/certificateQuery/cert_logo.png">
    </div>
    <!-- Swiper -->
<!--    <div class="swiper mySwiper">-->
<!--        <div class="swiper-wrapper">-->
<!--            <div class="swiper-slide">-->
<!--                <a href="http://p.qiao.baidu.com/cps/chat?siteId=10161829&amp;userId=21695683&amp;siteToken=c881beaba7b69ce8bb0ed938c9e6730c" target="_blank"><img src="https://jinzhiweiye.oss-cn-hangzhou.aliyuncs.com/2023/11/1129/zhengshuchaxun.jpg" alt=""></a>-->
<!--            </div>-->
<!--            <div class="swiper-slide">-->
<!--                <a href="http://p.qiao.baidu.com/cps/chat?siteId=10161829&amp;userId=21695683&amp;siteToken=c881beaba7b69ce8bb0ed938c9e6730c" target="_blank"><img src="http://www.jzwy123.com/uploadfile/2021/1022/20211022044928526.jpg" alt=""></a>-->
<!--            </div>-->
<!--            <div class="swiper-slide">-->
<!--                <a href="http://p.qiao.baidu.com/cps/chat?siteId=10161829&amp;userId=21695683&amp;siteToken=c881beaba7b69ce8bb0ed938c9e6730c" target="_blank"><img src="http://www.jzwy123.com/uploadfile/2021/1022/20211022044825824.jpg" alt=""></a>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="swiper-pagination"></div>-->
<!--    </div>-->
    <div class="form-box">
        <div class="item">
            <label class="ti1"><span>*</span> 姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</label>
            <input  type="text" id="name" placeholder="请输入姓名" class="ti2 layui-input">
        </div>
        <div class="item">
            <label class="ti1"><span>*</span> 身份证号:</label>
            <input type="text" id="idNumber" placeholder="请输入身份证号" class="ti2 layui-input">
        </div>
        <div class="btn-box" onclick="queryClick()">查询</div>
    </div>
    <div class="detail-box">
        <div class="detail">
            <div class="tit-name">
                证书信息
                <div class="line"></div>
            </div>
            <div class="img-box">
                <img class="no-image" src="https://jinzhiweiye.oss-cn-hangzhou.aliyuncs.com/d5980d4549c34a1ca9024b55d321d990b8gcSqiZ1PWx678dd38af731a5bf92e52bca60e0d7db.png" width="190" height="122">
                <div class="no-text no-data">暂无证书</div>
                <div class="no-text no-cert">
                    未查询到您的证书信息，<br/><br/>
                    请确认输入了正确的姓名与身份证号！
                </div>
            </div>
            <div class="list-box">
                <div class="items">
                    <div class="tit fl">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</div>
                    <div class="content fl name"></div>
                </div>
                <div class="items">
                    <div class="tit fl">证件类型：</div>
                    <div class="content fl idNumberType"></div>
                </div>
                <div class="items">
                    <div class="tit fl">证件号码：</div>
                    <div class="content fl idNumber"></div>
                </div>
                <div class="items">
                    <div class="tit fl">职业名称：</div>
                    <div class="content fl type"></div>
                </div>
                <div class="items">
                    <div class="tit fl">证书编号：</div>
                    <div class="content fl numbers"></div>
                </div>
                <div class="items">
                    <div class="tit fl">发证日期：</div>
                    <div class="content fl getTime"></div>
                </div>
                <div class="items">
                    <div class="tit fl">发证机构：</div>
                    <div class="content fl issuingUnit"></div>
                </div>
                <img class="imgUrl" style="margin-top: 14px" width="100%" src="">
            </div>


        </div>
    </div>
</div>
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/swiper-bundle.js"></script>
<script type="text/javascript">
    // var swiper = new Swiper(".mySwiper", {
    //     pagination: {
    //         el: ".swiper-pagination",
    //     },
    //     spaceBetween: 30,
    //     centeredSlides: true,
    //     autoplay: {
    //         delay: 2500,
    //         disableOnInteraction: false,
    //     },
    // });


    //回车查询
    var examinationListIntro = null;
    document.onkeydown =cdk;
    function cdk(){
        if(event.keyCode ==13){
            query();
        }
    }
    var id=null;
    $(function () {
    });

    $("input").each(function (k,v){
        $(v).blur(function (){
            $(".no-data").show()
            $('.no-cert').hide()
        })
    })

    function queryClick(){
        var name = $("#name").val();
        var idNumber = $("#idNumber").val();
        var regId = /^[1-9]\d{5}[1-9]\d{3}((0[1-9])|(1[0-2]))((0[1-9])|([1-2][0-9])|(3[0-1]))\d{3}(\d|x|X)$/;
        if(name==''){
            alert('请输入姓名');
            return false
        }
        if(idNumber==''){
            alert('请输入身份证');
            return false
        }
        if (!regId.test(idNumber)) {
            alert('请输入正确的身份证号');
            return false
        }
        $.ajax({
            type: "GET",
            url:"/jzweb/newTrainingCertificates/selNewTrainingCertificates",
            data: {name:name,idNumber:idNumber},
            success: function (r) {
                console.log("map =" , r.data);

                if(r.code==0){
                    if(r.data){
                        var result = r.data;
                        $('.name').html(result.name)
                        $('.idNumberType').html(result.idNumberType)
                        $('.idNumber').html(result.idNumber)
                        $('.type').html(result.type)
                        $('.numbers').html(result.numbers)
                        $('.getTime').html(result.getTime)
                        $('.issuingUnit').html(result.issuingUnit)
                        $('.imgUrl').attr('src',result.imgUrl)
                        $('.list-box').show()
                        $('.no-cert').hide()
                        $('.no-data').hide()
                        $('.no-image').hide()
                    }else{
                        console.log('哈哈哈')
                        $('.list-box').hide()
                        $('.no-image').show()
                        $('.no-cert').show()
                        $('.no-data').hide()
                    }
                }else{
                    alert(r.msg);
                }
            }
        });
    }
    function query() {
        var certificateNumber = $("#certificateNumber").val();
        var idNumber = $("#idNumber").val();
        var name = $("#name").val();
        $.ajax({
            type: "GET",
            url:"/jzApi/ApiTrainCertificateController/getUserCertificate",
            data: {certificateNumber:certificateNumber,name:name , idNumber:idNumber},
            success: function (r) {
                console.log("map =" , r.data[0]);

                if(r.code==0){
                    var result = r.data[0];
                    location.href = '/certificate/queryResult?certificateNumber='+result.certificateNumber+
                        "&courseTitle="+result.courseTitle+"&getTime="+result.getTime+"&grade="+result.grade+
                        "&idNumber="+result.idNumber+"&img="+result.img+"&name="+result.name+"&period="+result.period+
                        "&sex="+result.sex+"&type="+result.type+"&unit="+result.unit;
                }else{
                    alert(r.msg);
                }
            }
        });
    }
</script>
</body>





